<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>其他新闻</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==1">新闻列表</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage==3">修改新闻</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

         <!--表格-->
        <el-row v-show='showPage==1'>
            <el-row style="margin-top:10px">
                <el-table :data="tableData" border stripe style="width: 100%" 
                size="small" :highlight-current-row="true" ref="multipleTable">
                    <el-table-column
                        label="编号"
                        type="index"
                        min-width="100"
                    ></el-table-column>
                    <el-table-column
                        label="名称"
                        prop="title"
                        min-width="200"
                    ></el-table-column>
                    <el-table-column
                        label="附件数量"
                        prop="attachCount"
                        min-width="100"
                    ></el-table-column>
                    <el-table-column label="创建时间" prop='createTime' min-width="120"></el-table-column>
                    <el-table-column label="修改时间" prop='updateTime' min-width="120"></el-table-column>
                    <el-table-column label="操作" min-width="120">
                        <template slot-scope="scope">
                            <el-button type="text" @click="modify(scope.row)">修改</el-button>
                            <el-button type="text" @click="toPreview(scope.row)">预览</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-row>

        <!-- 表单 -->
        <el-row v-show='showPage==3'>
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addBack'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-form style="margin-top:10px;" label-position='right' label-width='80px' :model='addForm'
            ref='addForm' size='small' :rules='addForm.rules'>
                <el-form-item label="标题" prop='title'>
                    <el-input style="width:500px;" :disabled="true" v-model="addForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="附件" prop='imageUrl' v-if="addForm.contentId=='bmch'">
                        <el-upload style="width:500px;"
                        :action="uploadImgUrl"
                        :headers="headers"
                        :on-success="handleSuccess"
                        :before-upload="beforeUpload"
                        :limit="5"
                        :on-exceed="handleExceed"
                        :file-list="addForm.fileList"
                        :on-remove="handleRemove"
                        >
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">文件大小不能超过10M</div>
                        </el-upload>
                </el-form-item>
                <el-form-item label='正文' prop='content'>
                    <el-row>
                        <el-col :span='12'>
                            <vue-ueditor-wrap v-model="addForm.content" :config="addForm.editorConfig"/>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
                </el-form-item>
            </el-form>

        </el-row>
    </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import conf from '@/utils/conf.js'
export default {
    data(){
        return {
            showPage: 1,
            headers: {
                Authorization: sessionStorage.token,
                item: 'attach',
            },
            uploadImgUrl: conf.baseUrl() + '/api/img/upload',
            addForm: {
                title: '',
                fileList: [],
                contentId: '',
                content: '',
                editorConfig: {
                    // 编辑器自动被内容撑高
                    autoHeightEnabled: true,
                    // 初始容器高度
                    initialFrameHeight: 450,
                    // 初始容器宽度
                    initialFrameWidth: '685',
                    // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                    // serverUrl: 'http://35.201.165.105:8000/controller.php',
                    serverUrl: conf.baseUrl() + '/UEditor',
                    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                    UEDITOR_HOME_URL: conf.ueditorConf()
                },
                 rules: {
                     content: [
                        {required: true, message: '请填写正文', trigger: 'blur'}
                    ]
                 }
            },
            tableData: [],
        
        }
    },
    methods: {

        addBack(){
            this.showPage = 1;
        },

        handleSuccess(res, file, fileList){
            var p = {};
            p.name = res.data.name;
            p.url = res.data.imgUrl;
            this.addForm.fileList.push(p)
        },

        handleRemove(file, fileList){
            this.addForm.fileList = this.addForm.fileList.filter(item => {
                if(item.uid == file.uid){

                }else{
                    return item;
                }
            })
        },

        beforeUpload(file){
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error('文件大小不能超过 10MB!');
            }
            return isLt10M;
        },

        handleExceed(){},


        modify(row){
            this.addForm.title = row.title;
            this.addForm.contentId = row.contentId;
            let p = {};
            p.contentId = row.contentId;
            let url = '/api/news/getOther';
            this.$http.fetch(url, p)
            .then(res=>{
                this.addForm.content = res.data.content;
                this.addForm.fileList = res.data.attachList;
                this.showPage = 3;
            })
        },
        
        toPreview(row) {
            var url = '';
            if(row.contentId=='xlap'){
                url = conf.baseUrl() + '/line';    
            }else if(row.contentId=='bmch'){
                url = conf.baseUrl() + '/examination';
            }else if(row.contentId=='zzfw'){
                url = conf.baseUrl() + '/increment';
            }else if(row.contentId=='lxwm'){
                url = conf.baseUrl() + '/concat';
            }else if(row.contentId=='gywm'){
                url = conf.baseUrl() + '/about';
            }else{
                url = conf.baseUrl() + '/index';
            }
            window.open(url,'_blank');
        },
        
        listAll(){
            let p = {};
            let url = '/api/news/otherList';
            this.$http.fetch(url, p)
            .then(res=>{
                this.tableData = res.data;
            })
        },
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if(valid){
                    let p = {};
                    let url = '/api/news/modifyOther';
                    p.contentId = this.addForm.contentId;
                    p.content = this.addForm.content;
                    if(this.addForm.fileList.length>0){
                        p.attachList = JSON.stringify(this.addForm.fileList);
                    }
                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.showPage = 1;
                        this.listAll();
                    })
                }
            });
        }
    },
    mounted(){
        this.listAll();
    },
    components: {
        VueUeditorWrap
    },
};
</script>